<template>
  <div class="product-list-container">
    <!-- 导航栏 -->
    <Navbar />
    
    <!-- 分类标签区域 -->
    <div class="category-section">
      <div class="container">
        <div class="filter-tabs">
          <el-tabs v-model="selectedCategory" @tab-change="handleCategoryChange">
            <el-tab-pane label="全部" name="all" />
            <el-tab-pane 
              v-for="category in categories" 
              :key="category.categoryId"
              :label="category.categoryName" 
              :name="category.categoryId.toString()"
            />
          </el-tabs>
        </div>
      </div>
    </div>

    <!-- 商品网格 -->
    <div class="products-section">
      <div class="container">
        <!-- 排序和搜索控制栏 -->
        <div class="controls-bar">
          <div class="left-controls">
            <div class="search-bar">
              <el-input
                v-model="searchKeyword"
                placeholder="搜索PCB产品、型号、规格..."
                size="default"
                class="search-input"
                @input="handleSearch"
                clearable
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
            <div class="sort-controls">
              <span class="label">排序：</span>
              <div class="custom-select" @click="toggleSortDropdown">
                <span class="selected-text">{{ getSortLabel(sortBy) }}</span>
                <el-icon class="dropdown-icon" :class="{ 'is-reverse': showSortDropdown }">
                  <ArrowDown />
                </el-icon>
                <div v-show="showSortDropdown" class="dropdown-menu" @click.stop>
                  <div 
                    v-for="option in sortOptions" 
                    :key="option.value"
                    class="dropdown-item"
                    :class="{ 'is-selected': sortBy === option.value }"
                    @click="selectSort(option.value)"
                  >
                    {{ option.label }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="results-info">
            共找到 {{ total }} 个产品
          </div>
        </div>

        <!-- 商品卡片网格 -->
        <div v-if="loading" class="loading-section">
          <el-skeleton 
            v-for="n in 8" 
            :key="n"
            :loading="true" 
            animated
            class="product-skeleton"
          >
            <template #template>
              <el-skeleton-item variant="image" style="width: 100%; height: 200px;" />
              <el-skeleton-item variant="h3" style="width: 80%; margin-top: 10px;" />
              <el-skeleton-item variant="text" style="width: 60%;" />
              <el-skeleton-item variant="text" style="width: 40%;" />
            </template>
          </el-skeleton>
        </div>

        <div v-else-if="products.length === 0" class="empty-state">
          <el-empty description="暂无商品数据" />
        </div>

        <div v-else class="products-grid" :class="{ 'single-item': products.length === 1 }">
          <el-card 
            v-for="product in products" 
            :key="product.productId"
            class="product-card"
            @click="viewProduct(product.productId)"
          >
            <div class="product-image">
              <el-icon size="80" class="product-icon"><Cpu /></el-icon>
            </div>
            <div class="product-info">
              <h4>{{ product.productName || '商品名称' }}</h4>
              <p class="product-specs">{{ product.specParams || '暂无规格信息' }}</p>
              <div class="product-price">
                <span class="price">¥{{ product.price || 0 }}</span>
                <span class="stock">库存: {{ product.stock || 0 }}</span>
              </div>
              <div class="product-actions">
                <el-button 
                  type="primary" 
                  size="small"
                  @click.stop="addToCart(product)"
                  :disabled="!product.stock"
                >
                  {{ product.stock > 0 ? '加入购物车' : '暂无库存' }}
                </el-button>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 分页 -->
        <div class="pagination-section" v-if="total > pageSize">
          <div class="custom-pagination">
            <div class="pagination-info">
              共 {{ total }} 条记录
            </div>
            
            <div class="pagination-sizes">
              <span class="label">每页显示：</span>
              <div class="custom-select size-select" @click="toggleSizeDropdown">
                <span class="selected-text">{{ pageSize }}</span>
                <el-icon class="dropdown-icon" :class="{ 'is-reverse': showSizeDropdown }">
                  <ArrowDown />
                </el-icon>
                <div v-show="showSizeDropdown" class="dropdown-menu" @click.stop>
                  <div 
                    v-for="size in pageSizes" 
                    :key="size"
                    class="dropdown-item"
                    :class="{ 'is-selected': pageSize === size }"
                    @click="selectPageSize(size)"
                  >
                    {{ size }}
                  </div>
                </div>
              </div>
            </div>

            <div class="pagination-controls">
              <button 
                class="pagination-btn" 
                :disabled="currentPage <= 1"
                @click="handlePrevPage"
              >
                <el-icon><ArrowLeft /></el-icon>
              </button>
              
              <div class="page-numbers">
                <button
                  v-for="page in visiblePages"
                  :key="page"
                  class="page-btn"
                  :class="{ 'is-active': page === currentPage, 'is-ellipsis': page === '...' }"
                  :disabled="page === '...'"
                  @click="handlePageClick(page)"
                >
                  {{ page }}
                </button>
              </div>
              
              <button 
                class="pagination-btn" 
                :disabled="currentPage >= totalPages"
                @click="handleNextPage"
              >
                <el-icon><ArrowRight /></el-icon>
              </button>
            </div>

            <div class="pagination-jumper">
              <span class="label">跳转到：</span>
              <input 
                v-model="jumpPage" 
                class="jump-input"
                type="number"
                :min="1"
                :max="totalPages"
                @keyup.enter="handleJump"
              />
              <button class="jump-btn" @click="handleJump">确定</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 浮动购物车 -->
    <FloatingCart />
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { Search, Cpu, ArrowDown, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { categoryAPI, productAPI } from '@/api'
import Navbar from '@/components/Navbar.vue'
import FloatingCart from '@/components/FloatingCart.vue'

export default {
  name: 'ProductListView',
  components: {
    Navbar,
    FloatingCart,
    Search,
    Cpu,
    ArrowDown,
    ArrowLeft,
    ArrowRight
  },
  setup() {
    const router = useRouter()
    const store = useStore()

    // 响应式数据
    const loading = ref(false)
    const products = ref([])
    const categories = ref([])
    const total = ref(0)
    const currentPage = ref(1)
    const pageSize = ref(12)
    const searchKeyword = ref('')
    const selectedCategory = ref('all')
    const sortBy = ref('createTime')
    const showSortDropdown = ref(false)
    const showSizeDropdown = ref(false)
    const jumpPage = ref('')
    
    // 排序选项
    const sortOptions = ref([
      { label: '默认', value: 'createTime' },
      { label: '价格从低到高', value: 'price_asc' },
      { label: '价格从高到低', value: 'price_desc' },
      { label: '最新发布', value: 'newest' }
    ])

    // 分页大小选项
    const pageSizes = ref([12, 24, 48])

    // 计算属性
    const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
    
    const visiblePages = computed(() => {
      const pages = []
      const total = totalPages.value
      const current = currentPage.value
      
      if (total <= 7) {
        for (let i = 1; i <= total; i++) {
          pages.push(i)
        }
      } else {
        if (current <= 4) {
          for (let i = 1; i <= 5; i++) {
            pages.push(i)
          }
          pages.push('...')
          pages.push(total)
        } else if (current >= total - 3) {
          pages.push(1)
          pages.push('...')
          for (let i = total - 4; i <= total; i++) {
            pages.push(i)
          }
        } else {
          pages.push(1)
          pages.push('...')
          for (let i = current - 1; i <= current + 1; i++) {
            pages.push(i)
          }
          pages.push('...')
          pages.push(total)
        }
      }
      
      return pages
    })
    
    // 获取分类列表
    const fetchCategories = async () => {
      try {
        const response = await categoryAPI.getAllCategories()
        let categoryData = response.categories || response.data || response || []
        
        // 确保categoryData是数组
        if (!Array.isArray(categoryData)) {
          console.warn('API返回的分类数据不是数组:', categoryData)
          categoryData = []
        }
        
        categories.value = categoryData
      } catch (error) {
        console.error('获取分类失败:', error)
        ElMessage.error('获取分类列表失败')
        categories.value = []
      }
    }

    // 获取商品列表
    const fetchProducts = async () => {
      try {
        loading.value = true
        let response
        let productData = []
        
        if (searchKeyword.value) {
          // 搜索商品
          response = await productAPI.searchProducts(searchKeyword.value)
          productData = response.products || []
        } else if (selectedCategory.value && selectedCategory.value !== 'all') {
          // 按分类获取商品（排除"全部"选项）
          response = await productAPI.getProductsByCategory(selectedCategory.value)
          productData = response.products || []
        } else {
          // 分页获取所有商品（包括选择"全部"的情况）
          response = await productAPI.getProductsByPage(currentPage.value - 1, pageSize.value)
          productData = response.products || []
        }

        // 确保productData是数组
        if (!Array.isArray(productData)) {
          console.warn('API返回的商品数据不是数组:', productData)
          productData = []
        }

        products.value = productData
        
        // 设置总数
        if (response.totalElements !== undefined) {
          total.value = response.totalElements
        } else {
          total.value = productData.length
        }

      } catch (error) {
        console.error('获取商品列表失败:', error)
        ElMessage.error('获取商品列表失败')
        products.value = []
        total.value = 0
      } finally {
        loading.value = false
      }
    }

    // 处理分类切换
    const handleCategoryChange = (categoryId) => {
      selectedCategory.value = categoryId
      currentPage.value = 1 // 重置页码
      searchKeyword.value = '' // 清空搜索关键词
      fetchProducts()
    }

    // 处理搜索
    const handleSearch = () => {
      currentPage.value = 1 // 重置页码
      selectedCategory.value = 'all' // 重置分类选择
      fetchProducts()
    }

    // 处理排序
    const handleSortChange = () => {
      fetchProducts()
    }

    // 获取排序标签
    const getSortLabel = (value) => {
      const option = sortOptions.value.find(item => item.value === value)
      return option ? option.label : '默认'
    }

    // 切换排序下拉菜单
    const toggleSortDropdown = () => {
      showSortDropdown.value = !showSortDropdown.value
    }

    // 选择排序选项
    const selectSort = (value) => {
      sortBy.value = value
      showSortDropdown.value = false
      handleSortChange()
    }

    // 点击外部关闭下拉菜单
    const handleClickOutside = (event) => {
      const sortControls = document.querySelector('.sort-controls')
      const sizeSelect = document.querySelector('.size-select')
      if (sortControls && !sortControls.contains(event.target)) {
        showSortDropdown.value = false
      }
      if (sizeSelect && !sizeSelect.contains(event.target)) {
        showSizeDropdown.value = false
      }
    }

    // 分页相关方法
    const toggleSizeDropdown = () => {
      showSizeDropdown.value = !showSizeDropdown.value
    }

    const selectPageSize = (size) => {
      pageSize.value = size
      showSizeDropdown.value = false
      currentPage.value = 1
      fetchProducts()
    }

    const handlePrevPage = () => {
      if (currentPage.value > 1) {
        currentPage.value--
        fetchProducts()
      }
    }

    const handleNextPage = () => {
      if (currentPage.value < totalPages.value) {
        currentPage.value++
        fetchProducts()
      }
    }

    const handlePageClick = (page) => {
      if (page !== '...' && page !== currentPage.value) {
        currentPage.value = page
        fetchProducts()
      }
    }

    const handleJump = () => {
      const page = parseInt(jumpPage.value)
      if (page >= 1 && page <= totalPages.value) {
        currentPage.value = page
        jumpPage.value = ''
        fetchProducts()
      }
    }

    // 处理页面大小变化
    const handleSizeChange = (newSize) => {
      pageSize.value = newSize
      currentPage.value = 1
      fetchProducts()
    }

    // 处理当前页变化
    const handleCurrentChange = (newPage) => {
      currentPage.value = newPage
      fetchProducts()
    }

    // 查看商品详情
    const viewProduct = (productId) => {
      router.push(`/product/${productId}`)
    }

    // 添加到购物车
    const addToCart = (product) => {
      store.dispatch('addProductToCart', {
        productId: product.productId,
        productName: product.productName,
        price: product.price,
        quantity: 1,
        stock: product.stock
      })
      ElMessage.success('商品已添加到购物车')
    }

    // 组件挂载时获取数据
    onMounted(() => {
      fetchCategories()
      fetchProducts()
      document.addEventListener('click', handleClickOutside)
    })

    // 组件卸载时移除事件监听
    onUnmounted(() => {
      document.removeEventListener('click', handleClickOutside)
    })

    return {
      loading,
      products,
      categories,
      total,
      currentPage,
      pageSize,
      searchKeyword,
      selectedCategory,
      sortBy,
      showSortDropdown,
      showSizeDropdown,
      jumpPage,
      sortOptions,
      pageSizes,
      totalPages,
      visiblePages,
      handleCategoryChange,
      handleSearch,
      handleSortChange,
      handleSizeChange,
      handleCurrentChange,
      getSortLabel,
      toggleSortDropdown,
      toggleSizeDropdown,
      selectSort,
      selectPageSize,
      handlePrevPage,
      handleNextPage,
      handlePageClick,
      handleJump,
      viewProduct,
      addToCart
    }
  }
}
</script>

<style scoped>
.product-list-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 分类标签区域 */
.category-section {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-tabs {
  padding: 20px 0;
}

.filter-tabs :deep(.el-tabs__header) {
  margin: 0;
  border: none;
}

.filter-tabs :deep(.el-tabs__nav-wrap::after) {
  display: none;
}

.filter-tabs :deep(.el-tabs__item) {
  color: #b0bec5;
  font-weight: 500;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  border: none;
}

.filter-tabs :deep(.el-tabs__item:hover) {
  color: #64b5f6;
}

.filter-tabs :deep(.el-tabs__item.is-active) {
  color: #64b5f6;
}

.filter-tabs :deep(.el-tabs__active-bar) {
  background-color: #64b5f6;
}

/* 商品区域 */
.products-section {
  padding: 30px 0;
}

/* 控制栏 */
.controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.left-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-bar {
  min-width: 300px;
}

.search-input {
  width: 100%;
}

.search-input :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
}

.search-input :deep(.el-input__inner) {
  color: #ffffff;
}

.search-input :deep(.el-input__inner::placeholder) {
  color: #78909c;
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-controls .label {
  color: #ffffff;
  font-weight: 500;
  white-space: nowrap;
}

/* 自定义排序选择器 */
.custom-select {
  position: relative;
  width: 150px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-select:hover {
  border-color: rgba(100, 181, 246, 0.5);
  background: rgba(255, 255, 255, 0.15);
}

.selected-text {
  color: #ffffff;
  font-size: 14px;
  flex: 1;
}

.dropdown-icon {
  color: #ffffff;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.dropdown-icon.is-reverse {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(26, 26, 46, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  margin-top: 4px;
  overflow: hidden;
}

.dropdown-item {
  padding: 10px 12px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: rgba(100, 181, 246, 0.2);
  color: #64b5f6;
}

.dropdown-item.is-selected {
  background: rgba(100, 181, 246, 0.3);
  color: #64b5f6;
  font-weight: 500;
}

/* 自定义分页器样式 */
.custom-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 0;
}

.pagination-info {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.pagination-sizes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-sizes .label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.size-select {
  width: 80px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-btn {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn:hover:not(:disabled) {
  background: rgba(100, 181, 246, 0.2);
  border-color: rgba(100, 181, 246, 0.5);
  color: #64b5f6;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-btn {
  min-width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  padding: 0 8px;
}

.page-btn:hover:not(:disabled):not(.is-ellipsis) {
  background: rgba(100, 181, 246, 0.2);
  border-color: rgba(100, 181, 246, 0.5);
  color: #64b5f6;
}

.page-btn.is-active {
  background: rgba(100, 181, 246, 0.3);
  border-color: #64b5f6;
  color: #64b5f6;
  font-weight: 500;
}

.page-btn.is-ellipsis {
  background: transparent;
  border: none;
  cursor: default;
  color: rgba(255, 255, 255, 0.6);
}

.pagination-jumper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination-jumper .label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.jump-input {
  width: 60px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  padding: 0 8px;
}

.jump-input:focus {
  outline: none;
  border-color: #64b5f6;
  box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2);
}

.jump-btn {
  height: 32px;
  background: rgba(100, 181, 246, 0.2);
  border: 1px solid rgba(100, 181, 246, 0.5);
  border-radius: 6px;
  color: #64b5f6;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  padding: 0 12px;
}

.jump-btn:hover {
  background: rgba(100, 181, 246, 0.3);
  border-color: #64b5f6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .custom-pagination {
    flex-direction: column;
    gap: 15px;
  }
  
  .pagination-controls {
    order: 1;
  }
  
  .pagination-info {
    order: 2;
  }
  
  .pagination-sizes {
    order: 3;
  }
  
  .pagination-jumper {
    order: 4;
  }
}

.results-info {
  color: #b0bec5;
  font-size: 14px;
  font-weight: 500;
}

/* 商品网格 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

/* 单个商品时的特殊样式 */
.products-grid.single-item {
  grid-template-columns: minmax(280px, 400px);
  justify-content: flex-start;
}

.product-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.product-card:hover {
  transform: translateY(-5px);
  background: rgba(0, 212, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.product-card :deep(.el-card__body) {
  padding: 0;
}

.product-image {
  text-align: center;
  padding: 20px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 15px;
}

.product-icon {
  color: #00D4FF;
}

.product-info {
  padding: 20px;
}

.product-info h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #ffffff;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em;
}

.product-specs {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  margin-bottom: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.4em;
}

.product-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #00D4FF;
}

.stock {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.product-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-actions .el-button {
  width: 100%;
  background: linear-gradient(45deg, #00D4FF, #4F46E5);
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 8px 16px;
  transition: all 0.3s ease;
}

.product-actions .el-button:hover:not(:disabled) {
  background: linear-gradient(45deg, #4F46E5, #00D4FF);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
}

.product-actions .el-button:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 加载状态 */
.loading-section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.product-skeleton {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 20px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  margin-bottom: 30px;
}

.empty-state :deep(.el-empty__description p) {
  color: #b0bec5;
}

/* 分页 */
.pagination-section {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pagination-section :deep(.el-pagination) {
  --el-pagination-bg-color: rgba(255, 255, 255, 0.05);
  --el-pagination-text-color: #ffffff;
}

.pagination-section :deep(.el-pagination .btn-next),
.pagination-section :deep(.el-pagination .btn-prev) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.pagination-section :deep(.el-pager li) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 2px;
  border-radius: 8px;
  color: #ffffff;
}

.pagination-section :deep(.el-pager li.is-active) {
  background: linear-gradient(135deg, #64b5f6 0%, #42a5f5 100%);
  color: #ffffff;
  border-color: #64b5f6;
}

.pagination-section :deep(.el-select) {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.pagination-section :deep(.el-select__wrapper) {
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff;
}

.pagination-section :deep(.el-select .el-input__wrapper) {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff;
}

.pagination-section :deep(.el-select .el-input__inner) {
  color: #ffffff !important;
}

.pagination-section :deep(.el-pagination__total),
.pagination-section :deep(.el-pagination__jump) {
  color: #ffffff;
}

.pagination-section :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.pagination-section :deep(.el-input__inner) {
  color: #ffffff !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
  
  .controls-bar {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .left-controls {
    flex-direction: column;
    gap: 15px;
  }
  
  .search-bar {
    min-width: auto;
  }
  
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }
  
  .products-grid.single-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}


</style> 